<template>
  <div class="coupon-page">
    <van-nav-bar title="优惠券" left-arrow @click-left="goBack" />
    
    <!-- 标签页 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="可领取">
        <div class="coupon-list">
          <div 
            v-for="coupon in availableCoupons" 
            :key="coupon.id" 
            class="coupon-item"
          >
            <div class="coupon-content">
              <div class="coupon-left">
                <div class="coupon-amount">
                  <span class="symbol">¥</span>
                  <span class="number">{{ coupon.amount }}</span>
                </div>
                <div class="coupon-condition">满{{ coupon.condition }}可用</div>
              </div>
              <div class="coupon-right">
                <div class="coupon-title">{{ coupon.title }}</div>
                <div class="coupon-desc">{{ coupon.description }}</div>
                <div class="coupon-time">{{ coupon.validTime }}</div>
                <van-button 
                  type="primary" 
                  size="small" 
                  @click="receiveCoupon(coupon)"
                  :disabled="coupon.received"
                >
                  {{ coupon.received ? '已领取' : '立即领取' }}
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      
      <van-tab title="我的优惠券">
        <div class="coupon-list">
          <div 
            v-for="coupon in myCoupons" 
            :key="coupon.id" 
            class="coupon-item"
            :class="{ expired: coupon.expired }"
          >
            <div class="coupon-content">
              <div class="coupon-left">
                <div class="coupon-amount">
                  <span class="symbol">¥</span>
                  <span class="number">{{ coupon.amount }}</span>
                </div>
                <div class="coupon-condition">满{{ coupon.condition }}可用</div>
              </div>
              <div class="coupon-right">
                <div class="coupon-title">{{ coupon.title }}</div>
                <div class="coupon-desc">{{ coupon.description }}</div>
                <div class="coupon-time">{{ coupon.validTime }}</div>
                <div class="coupon-status">
                  <van-tag :type="coupon.expired ? 'default' : 'success'">
                    {{ coupon.expired ? '已过期' : '可使用' }}
                  </van-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 响应式数据
const activeTab = ref(0)
const availableCoupons = ref([])
const myCoupons = ref([])

// 获取可领取的优惠券
const getAvailableCoupons = async () => {
  try {
    // 模拟数据
    availableCoupons.value = [
      {
        id: 1,
        title: '新人专享券',
        description: '全场通用，无门槛使用',
        amount: 10,
        condition: 0,
        validTime: '2024-12-31到期',
        received: false
      },
      {
        id: 2,
        title: '满减优惠券',
        description: '满100减20，限时优惠',
        amount: 20,
        condition: 100,
        validTime: '2024-12-31到期',
        received: false
      },
      {
        id: 3,
        title: '品类专享券',
        description: '服装类商品专用',
        amount: 15,
        condition: 50,
        validTime: '2024-12-31到期',
        received: false
      }
    ]
  } catch (error) {
    console.error('获取优惠券失败:', error)
    showToast('获取优惠券失败')
  }
}

// 获取我的优惠券
const getMyCoupons = async () => {
  try {
    // 模拟数据
    myCoupons.value = [
      {
        id: 4,
        title: '已领取的优惠券',
        description: '全场通用，无门槛使用',
        amount: 5,
        condition: 0,
        validTime: '2024-12-31到期',
        expired: false
      },
      {
        id: 5,
        title: '已过期的优惠券',
        description: '满50减10',
        amount: 10,
        condition: 50,
        validTime: '2024-01-01到期',
        expired: true
      }
    ]
  } catch (error) {
    console.error('获取我的优惠券失败:', error)
    showToast('获取我的优惠券失败')
  }
}

// 领取优惠券
const receiveCoupon = async (coupon) => {
  try {
    // 这里应该调用领取优惠券 API
    // await receiveCouponAPI(coupon.id)
    
    showToast('领取成功')
    coupon.received = true
    
    // 刷新我的优惠券列表
    getMyCoupons()
  } catch (error) {
    console.error('领取优惠券失败:', error)
    showToast('领取失败')
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 组件挂载时获取数据
onMounted(() => {
  getAvailableCoupons()
  getMyCoupons()
})
</script>

<style lang="scss" scoped>
.coupon-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.coupon-list {
  padding: 10px;
}

.coupon-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  &.expired {
    opacity: 0.6;
    
    .coupon-content {
      background: #f5f5f5;
    }
  }
}

.coupon-content {
  display: flex;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: #fff;
  padding: 15px;
  
  .coupon-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
    padding-right: 15px;
    
    .coupon-amount {
      display: flex;
      align-items: baseline;
      margin-bottom: 5px;
      
      .symbol {
        font-size: 16px;
        margin-right: 2px;
      }
      
      .number {
        font-size: 32px;
        font-weight: bold;
      }
    }
    
    .coupon-condition {
      font-size: 12px;
      opacity: 0.8;
    }
  }
  
  .coupon-right {
    flex: 1;
    padding-left: 15px;
    
    .coupon-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .coupon-desc {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 5px;
    }
    
    .coupon-time {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 10px;
    }
    
    .coupon-status {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style> 